<template>
    <div class="app-container">
        <div v-if="true">
            <el-row :gutter="20">
                <el-col :xs="10" :sm="12" :md="12" :lg="12">
                    <div style="height:36px;line-height:36px;font-size:1.2em">虚拟资源管理</div>
                </el-col>
                <el-col :xs="14" :sm="12" :md="12" :lg="12">
                    <div class="grid-content bg-purple-light" style="float:right">
                        <el-button @click="updataVisible=true">导出</el-button>
                        <el-button @click="updataVisible=true">导入</el-button>
                    </div>
                </el-col>
            </el-row>
            <div style="padding:10px"></div>
            <el-row>
                <el-col :xs="24" :sm="6" :md="6" :lg="6">
                    <div style="padding:0 21px">
                        <!-- <p >机房列表</p> -->
                        <div style="height:36px;line-height:36px">机房列表</div>
                        <nav-tree :default-expanded-keys="[defaultId]" :defaultChecked="defaultId" :navTreeHeight="defaultHeight" :data="data" node-key="id" :props="defaultProps" :highlight-current="highlightCurrent" :filter-node-method="filterNode" @node-click="handleNodeClick" ref="nav_tree"></nav-tree>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="18" :md="18" :lg="18">
                    <div>
                        <!-- 宿主机基本信息 -->
                        <transition name="fade">
                            <real-info v-if="showHost" @updataTree="abc" :deviceId="defaultId" :pieHeight="pieHeight"></real-info>
                            <!-- 虚拟主机基本信息 -->
                            <virtual-info v-if="showVirtual" :virtualId="defaultId" :pieHeight="pieHeight"></virtual-info>
                        </transition>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<style>

</style>
<script>
import NavTree from '@/components/nav-tree';
import virtualInfo from './hostInfoVirtual.vue';
import realInfo from './hostInfoReal.vue';
export default {
    components: {
        NavTree,
        virtualInfo,
        realInfo
    },
    created() {
        this.getRoomTree()
    },
    mounted() {
        // this.defaultId = '';
    },
    data() {
        return {
            formLabelWidth: '100px',
            //是否高亮显示选中
            highlightCurrent: true,
            //筛选内容
            filterText: '',
            //默认展开选中的内容
            defaultId: '',
            //tree的默认高度
            defaultHeight: '600px',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label',
                icon: 'icon'
            },
            showHost: false,
            showVirtual: false,
            pieHeight: ''
        }
    },
    methods: {
        //获取树导航栏信息
        getRoomTree() {
            let _url = '/resman/virtual/roomTree';
            this.$http.get(_url).then((response) => {
                // console.log(response)
                if (response.code === 0) {
                    let temp_arr = [];
                    response.data.rooms.forEach((first) => {
                        let first_obj = { 'id': first.roomId, 'label': first.roomName, children: [] };
                        this.data.push(first_obj);
                        first.cabinets.forEach(second => {
                            let second_obj = { 'id': second.cabinetId, 'label': second.cabinetCode, children: [] };
                            first_obj.children.push(second_obj);
                            second.servers.forEach(third => {
                                let third_obj = { 'id': third.deviceId, 'label': third.ipmiAddr, children: [] };
                                temp_arr.push(third_obj);
                                second_obj.children.push(third_obj);
                                third.virtualMachines.forEach(fourth => {
                                    let fourth_obj = { 'id': fourth.virtualId, 'label': fourth.virtualHostName };
                                    third_obj.children.push(fourth_obj);
                                });
                            });
                        });
                    });
                    if(this.defaultId==''){
                        this.defaultId = temp_arr[0].id;
                        this.hostSwitch(3, temp_arr[0].id, temp_arr[0].children.length);
                        }
                    console.log(this.defaultId)
                } else {
                    console.log(response.msg)
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        //点击tree列表的回调函数
        handleNodeClick(data, node) {
            // console.log(data);
            // console.log(node);
            if (node.level > 2) {
                this.highlightCurrent = true;
                this.hostSwitch(node.level, data.id, node.childNodes.length);
            } else {
                this.highlightCurrent = false;
            }
        },
        //筛选信息
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        hostSwitch(level, id, nums) {
            this.showHost = false;
            this.showVirtual = false;
            if (level == 3) {
                this.pieHeight = 280 + nums * 20 + 'px';
                this.defaultId = id;
                setTimeout(() => {
                    this.showHost = true;
                }, 100)
            } else if (level == 4) {
                this.pieHeight = '300px';
                this.defaultId = id;
                this.showVirtual = true;
            }
        },
        abc(){
            this.getRoomTree()
        }
    }
}
</script>